<template>
  <el-menu :default-active="defaultActive"
           class="left-menu-cl"
           :router="true">
    <template v-for="item of menuData">
      <!--  二级菜单    -->
      <template v-if="item.child.length > 0">
        <el-submenu :index="item.mlid">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span style="font-size: 14px !important;">{{ item.mname }}</span>
          </template>
          <div class="submenu-item">
            <el-menu-item v-for="child of item.child"
                          :index="child.mlid"
                          :route="{path:child.route,query:{...child.query,m:child.mid,ml:child.mlid}}">
              {{ child.mname }}
            </el-menu-item>
          </div>
        </el-submenu>
      </template>
      <!--  一级菜单    -->
      <template v-else>
        <el-menu-item :index="item.mlid"
                      :route="{path:item.route,query:{...item.query,m:item.mid,ml:item.mlid}}">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.mname }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
/**
 * {左侧菜单}
 *
 * @author: 宋康
 * @date: 2023/1/30
 */
export default {
  name: "index",
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      defaultActive: ''
    }
  },
  methods: {
    selectDefaultActive() {
      this.defaultActive = this.$route.query.ml
    }
  },
  mounted() {
    this.selectDefaultActive();
  },
  watch: {
    $route: {
      handler: 'selectDefaultActive',
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.left-menu-cl {
  &:deep(.el-submenu__title) {
    width: 182px !important;
    height: 56px !important;
    line-height: 56px !important;
    text-align: left !important;
    color: #303133 !important;
    background-color: #FFF !important;
  }

  &:deep(.el-submenu .el-menu-item){
    min-width: 100px;
  }
}
</style>
